<template>
  <el-dialog v-loading="loading" title="日志详情" width="1100px" :visible.sync="dialogVisible" @close="handleClose">
    <div class="info_group">
      <div class="info_section" />
      <div class="info_title">基本信息</div>
    </div>
    <el-row>
      <el-col :span="8" class="info_content">
        <span style="color: #868d9f">用户名：</span>
        {{ logInfo.username }}
      </el-col>
      <el-col :span="8" class="info_content">
        <span style="color: #868d9f">IP地址：</span>
        {{ logInfo.ip }}
      </el-col>
      <el-col :span="8" class="info_content">
        <span style="color: #868d9f">方法名称：</span>
        {{ logInfo.methodName }}
      </el-col>
      <el-col :span="8" class="info_content">
        <span style="color: #868d9f">执行时间：</span>
        {{ logInfo.executionTime }}
      </el-col>
      <el-col :span="8" class="info_content">
        <span style="color: #868d9f">是否异常：</span>
        {{ logInfo.errorFlag === '1' ? '是' : '否' }}
      </el-col>
      <el-col :span="8" class="info_content">
        <span style="color: #868d9f">操作时间：</span>
        {{ logInfo.requestTime }}
      </el-col>
      <el-col :span="24" class="info_content">
        <span style="color: #868d9f">请求路径：</span>
        {{ logInfo.uri }}
      </el-col>
    </el-row>
    <el-row>
      <div>
        <div class="info_group">
          <div class="info_section" />
          <div class="info_title">请求参数</div>
        </div>
        <el-input
          v-model="logInfo.request"
          type="textarea"
          autosize
          readonly
          placeholder="无"
        />
      </div>
      <div v-if="logInfo.errorFlag">
        <div class="info_group">
          <div class="info_section" />
          <div class="info_title">响应参数</div>
        </div>
        <el-input
          v-model="logInfo.errorMessage"
          type="textarea"
          autosize
          readonly
          placeholder="无"
        />
      </div>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>

import { selectLogById } from '@/api/system/log'

export default {
  name: 'DetailModule',
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      logInfo: {},
      loading: false
    }
  },
  methods: {
    init(id) {
      this.loading = true
      selectLogById(id).then(resp => {
        if (resp.success) {
          this.logInfo = resp.data
          if (resp.data.request) {
            this.logInfo.request = JSON.stringify(JSON.parse(resp.data.request), null, 2)
          }
          if (resp.data.response) {
            this.logInfo.response = JSON.stringify(JSON.parse(resp.data.response), null, 2)
          }
        }
      }).finally(() => {
        this.loading = false
      })
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>

</style>
